<template>
  <div class="page-header-index-wide page-header-wrapper-grid-content-main">
    <a-row :gutter="24">
      <a-col :md="24" :lg="17">
        <a-card>
          <div class="operate">
            <a-button type="dashed" style="width: 100%" icon="plus" @click="add">添加</a-button>
          </div>

          <a-list size="large" :loadin="loading" :pagination="pagination" @change="handlePageChange">
            <a-list-item :key="index" v-for="(item, index) in data">
              <div class="list-content-item">
                <span>ID</span>
                <p>{{ item.id }}</p>
              </div>
              <div class="list-content-item">
                <span>套餐名称</span>
                <p>{{ item.title }}</p>
              </div>
              <div slot="actions">
                <a @click="handleDetail(item.id)">查看</a>
                <a-divider type="vertical" />
                <a @click="handleEdit(item)">编辑</a>
                <a-divider type="vertical" />
                <a @click="handleItem(item)">项目</a>
                <a-divider type="vertical" />
                <a @click="handleDelete(item)">删除</a>
              </div>
              <div class="list-content">
                <div class="list-content-item">
                  <span>srcMoney</span>
                  <p>{{ item.srcMoney }}</p>
                </div>
                <div class="list-content-item">
                  <span>money</span>
                  <p>{{ item.money }}</p>
                </div>
                <div class="list-content-item">
                  <span>创建时间</span>
                  <p>{{ item.createTime }}</p>
                </div>
              </div>
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
      <a-col :md="24" :lg="7" class="info-class">
        <a-card v-if="selectItem.bean" :bordered="false">
          <a-descriptions title="套餐信息" :column="1">
            <a-descriptions-item label="套餐名称">
              {{ selectItem.bean?.title }}
            </a-descriptions-item>
            <a-descriptions-item label="srcMoney">
              {{ selectItem.bean?.srcMoney }}
            </a-descriptions-item>
            <a-descriptions-item label="money">
              {{ selectItem.bean?.money }}
            </a-descriptions-item>
            <a-descriptions-item label="描述">
              {{ selectItem.bean?.remark }}
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions title="套餐内容" :column="1">
            <a-descriptions-item v-for="item in selectItem.items" :key="item.id">
              {{ item.name }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
        <div v-else class="empty">
          <span>未选择套餐</span>
        </div>
      </a-col>

    </a-row>
    <CreateForm ref="createFrom" @ok="getList()" />

    <ItemForm ref="itemForm" />
  </div>
</template>

<script>
// 演示如何使用 this.$dialog 封装 modal 组件
import TaskForm from './modules/TaskForm'
import CreateForm from './modules/CreateForm'
import ItemForm from './modules/ItemForm'

import Info from './components/Info'
import { PageView, RouteView } from '@/layouts'
import api from '@/api/tijian/compackage'
import { Modal } from 'ant-design-vue';

export default {
  name: 'StandardList',
  components: {
    RouteView,
    PageView,
    TaskForm,
    Info,
    CreateForm,
    ItemForm
  },
  data() {
    return {
      data: [],
      status: 'all',
      tagInputVisible: false,
      tagInputValue: '',
      teams: [],
      teamSpinning: true,
      noTitleKey: 'app',
      // 查询参数
      queryParam: {
        type: 1,
        pageNo: 0,
        pageSize: 10
      },
      pagination: {
        current: 1,
        pageSize: 2,
        total: 0,
        showTotal: total => `共 ${total} 条数据`,
      },
      loading: false,
      selectItem: {}
    }
  },

  mounted() {
    this.getList()
    this.getTeams()
  },
  methods: {
    //  详情查询
    handleDetail(id) {
      api.getDetail({ id }).then(res => {
        this.selectItem = res.data
        this.selectItem.items = []
        for (let i = 0; i < res.data.itemList.length; i++) {
          if (res.data.itemList[i].packageSelect > 0) {
            this.selectItem.items.push(res.data.itemList[i])
          }
        }

      })
    },
    //  分页查询
    getList() {
      this.loading = true
      api.queryCheckPackagePage(this.queryParam).then(res => {
        this.loading = false
        this.data = res.data.dataList
        this.pagination.total = res.data.totalCount
        this.pagination.current = this.queryParam.pageNo + 1
      }).catch(err => {
        this.loading = false

      })
    },
    handlePageChange(e) {
      this.queryParam.pageNo = e.current - 1
      this.getList()
    },
    getTeams() {
      this.$http.get('/workplace/teams').then(res => {
        this.teams = res.result
        this.teamSpinning = false
      })
    },
    add() {
      this.$refs.createFrom.show()
    },
    handleEdit(record) {
      this.$refs.createFrom.show(record)

    },
    handleItem(record) {
      this.$refs.itemForm.show(record.id)
    },
    handleDelete(record) {
      Modal.confirm({
        title: '提示',
        content: '确认删除？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          api.delete({ id: record.id }).then(res => {
            this.$message.success(`删除成功`)
            this.getList()
          }).catch(err => {
            this.$message.error(`删除失败`)
          })
        }
      });
    }

  }
}
</script>

<style lang="less" scoped>
.page-header-wrapper-grid-content-main {
  width: 100%;
  height: 100%;
  min-height: 100%;
  transition: 0.3s;

  .account-center-avatarHolder {
    text-align: center;
    margin-bottom: 24px;

    &>.avatar {
      margin: 0 auto;
      width: 104px;
      height: 104px;
      margin-bottom: 20px;
      border-radius: 50%;
      overflow: hidden;

      img {
        height: 100%;
        width: 100%;
      }
    }

    .username {
      color: rgba(0, 0, 0, 0.85);
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      margin-bottom: 4px;
    }
  }

  .account-center-detail {
    p {
      margin-bottom: 8px;
      padding-left: 26px;
      position: relative;
    }

    i {
      position: absolute;
      height: 14px;
      width: 14px;
      left: 0;
      top: 4px;
      background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg);
    }

    .title {
      background-position: 0 0;
    }

    .group {
      background-position: 0 -22px;
    }

    .address {
      background-position: 0 -44px;
    }
  }

  .account-center-tags {
    .ant-tag {
      margin-bottom: 8px;
    }
  }

  .account-center-team {
    .members {
      a {
        display: block;
        margin: 8px 0;
        line-height: 24px;
        height: 20px;

        .member {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.65);
          line-height: 20px;
          vertical-align: top;
          transition: all 0.3s;
          display: inline-block;
        }

        &:hover {
          span {
            color: #1890ff;
          }
        }
      }
    }
  }

  .tagsTitle,
  .teamTitle {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 12px;
  }
}

.ant-avatar-lg {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.list-content-item {
  color: rgba(0, 0, 0, .45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;

  span {
    line-height: 20px;
  }

  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}

.info-class {
  height: calc(100vh - 200px);
  background: #ffffff;
  overflow-y: scroll;
}

.info-class::-webkit-scrollbar {
  width: 5px;
}
.empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}
</style>